<template>
<div class='scroll-list'>
    <scroll-list :data="list" :options="listOptions"></scroll-list>
</div>
</template>
<script setup lang='tsx'>
import ScrollList from '@/components/ScrollList/index.vue'
import { readonly, ref } from 'vue'
const list = ref([])
const names = ['张三', '李四', '王五', '赵六', '田七']
list.value = new Array(50).fill(null).map((_, index) => {
    const nowTime = new Date().getTime()
    return {
        index,
        id: (Math.floor(Math.random() * 10000) + nowTime).toString(16),
        name: names[Math.floor(Math.random() * names.length)],
        age: Math.floor(Math.random() * 100),
        address: (Math.floor(Math.random() * 10000) * nowTime).toString(16)
    }
})
const listOptions = readonly({
    key: 'id',
    columns: [
        { label: '序号', prop: 'index', maxWidth: '60px' },
        { prop: 'name', label: '姓名', width: '100px', render: (data) => {
            return (<span>{ data.data.name }</span>)
        } },
        { prop: 'age', label: '年龄', width: '100px', formmat: (age) => {
            return (age > 60) ? `${age} older` : age
        } },
        { prop: 'address', label: '地址', width: '400px' }
    ]
})
</script>
<style lang='scss' scoped>
.scroll-list {

}
</style>